<template>
  <div class="charts">
    <top-bar-son></top-bar-son>
    <!--    占位空间 45px-->
    <div class="space"></div>
    <seive-adapter></seive-adapter>
    <div class="half-space"></div>
    <!-- 待封装成图表组件 -->
    <div class="happenCharts" v-if="titleName === 'happenChart'">
      <!-- 发生频次图表部分 happenLineCharts-->
      <div class="chartContainner">
        <div ref="happen_line" style="width:290px;height:290px;margin: 0 auto"></div>
      </div>
      <div class="half-space"></div>
      <div class="chartContainner">
        <div ref="happen_pie" style="width: 290px;height: 290px;margin: 0 auto"></div>
      </div>
      <!--  分割线  -->
      <van-divider/>
    </div>
    <!--    能量图表-->
    <div class="energyCharts" v-if="titleName === 'energyChart'">
      <!--      能量波动图表部分 energyCharts-->
      <div class="chartContainner">
        <div ref="energy_line" style="margin: 0 auto;width: 290px;height: 290px"></div>
      </div>
      <div class="half-space"></div>
      <!--   能量饼状图表部分  energyPieChart   -->
      <div class="chartContainner">
        <div ref="energy_pie" style="height: 290px;width: 290px;margin: 0 auto"></div>
      </div>
    </div>
    <!--  破坏程度与破坏类型归于一页  -->
    <div class="destroyCharts" v-if="titleName === 'destroyChart'">
      <div class="chartContainner">
        <!--    破坏类型    -->
        <div ref="destroyTypePieChart" style="width: 290px;height: 290px;margin: 0 auto"></div>
      </div>
      <div class="half-space"></div>
      <div class="chartContainner">
        <div ref="destroyLevelPieChart" style="width: 290px;height: 290px;margin: 0 auto"></div>
      </div>
    </div>
    <!--  严重程度分区中装载垮塌事故图表  -->
    <div class="damageCharts" v-if="titleName === 'damageChart'">
      <!--   垮塌事故图表   -->
      <div class="chartContainner">
        <div ref="accidentPieChart" style="width: 290px;height: 290px;margin: 0 auto"></div>
      </div>
    </div>
    <!--  待拓展图表功能  -->
    <div class="extraCharts" v-if="titleName === 'extraChart'">
      <div class="chartContainner">
        <div ref="dynamicChart" style="width: 290px;height: 290px;margin: 0 auto"></div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBarSon from '../components/TopBarSon.vue';
import SeiveAdapter from "@/components/SeiveAdapter";
import * as echarts from 'echarts/lib/echarts'
import "echarts/lib/chart/pie";
import 'echarts/lib/component/grid';
import "echarts/lib/chart/line"
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend"
import "echarts/lib/component/toolbox"
import "echarts/lib/component/dataZoom"
import Qs from "qs";
import {energyData, happenTimes} from "@/request/api/tableData";
import {happenEnergyChart, happenFailureModeChart, happenTimesChart} from "@/request/api/chartData";
import {Toast} from "vant";

export default {
  name: "Charts",
  components: {TopBarSon, SeiveAdapter},
  data() {
    return {
      title: this.$store.state.jumpPage.title,
      titleName: this.$store.state.jumpPage.titleRes,
      happenLineData: {
        happenTimes: [],
        happenDate: []
      },
      happenPieChartData: {
        happen_day: '',
        unhappen_day: ''
      },
      happenEnergyChartData:{
        happenTime:[],
        happenEnergy:[],
        energyPieChartData:{
          aboveNine:'',
          nineAndEight:'',
          eightAndSeven:'',
          sevenAndSix:'',
          sixAndFive:'',
          fiveAndFour:''
        }
      },
      happenFailureModeChart:{
        happenTensorData:{
          pullNum:'',
          mixNum:'',
          shearNum:''
        },
        happenBvalueData:{
          severetyNum:'',
          nomalNum:'',
          venialNum:''
        }
      }
    };
  },
  mounted() {
    var startTime = this.$store.state.initData.start_time;
    var endTime = new Date().toLocaleDateString();
    var dbTable = this.$store.getters.userAreaSwitchTableName;
    this.initChart(startTime,endTime,dbTable);
  },
  created() {

  },
  methods: {
    //图表页面初始化加载
    initChart(startTime,endTime,dbTable) {
      let switchDate = endTime.replace(/\//g, '-');
      const formText = {
        start_time: startTime,
        end_time: endTime,
        db_table: dbTable
      };
      const formJSON = Qs.parse(formText);
      const formTextPie = {
        start_time: startTime,
        end_time: switchDate,
        db_table: dbTable
      };
      const formJSONPie = Qs.parse(formTextPie);
      if (this.$store.state.jumpPage.titleRes) {
        switch (this.$store.state.jumpPage.titleRes) {
          case "happenChart":
            //发生次数折线图请求方法
            happenTimes(formJSON)
                .then(response => {
                  this.happenLineData.happenDate.length = 0;
                  this.happenLineData.happenTimes.length = 0;
                  for (let index = 0; index < response.data.data.length; index++) {
                    this.happenLineData.happenTimes.push(response.data.data[index].happen_times);
                    this.happenLineData.happenDate.push(response.data.data[index].happen_date);
                  }
                  //事件发生折线图
                  let happenLineChart = echarts.init(this.$refs.happen_line);
                  happenLineChart.setOption({
                    title: {
                      text: "事件发生",
                      left: "center",
                      textStyle: {
                        color: "#000"
                      }
                    },
                    tooltip: {
                      trigger: "axis",
                      axisPointer: {
                        type: "cross",
                        label: {
                          backgroundColor: "#6a7985"
                        }
                      }
                    },
                    toolbox: {
                      show: true,
                      feature: {
                        saveAsImage: {}
                      }
                    },
                    grid: {
                      x: 40,
                      y: 30,
                      x2: 40,
                      y2: 20
                    },
                    xAxis: {
                      name: '时间',
                      data: this.happenLineData.happenDate,
                      /*改变x轴颜色*/
                      axisLine: {
                        lineStyle: {
                          color: "#000",
                          width: 1 //这里是为了突出显示加上的
                        }
                      }
                    },
                    yAxis: {
                      name: "发生次数",
                      type: "value",
                      axisLine: {
                        lineStyle: {
                          color: "#000",
                          width: 1 //这里是为了突出显示加上的
                        }
                      }
                    },
                    series: [
                      {
                        name: "当日发生次数",
                        data: this.happenLineData.happenTimes,
                        type: "line",
                        smooth: false
                      }
                    ]
                  });
                });
            //发生次数 饼状图请求方法
            happenTimesChart(formJSONPie)
                .then(response => {
                  console.log(response);
                  //接收数据
                  this.happenPieChartData.happen_day=response.data.data[0].happen_day;
                  this.happenPieChartData.unhappen_day = response.data.data[0].unhapppen_day;
                  //初始化chart
                  let happenPieChart = echarts.init(this.$refs.happen_pie);
                  happenPieChart.setOption({
                    title: {
                      text: '发生占比',
                      subtext: '占比',
                      left: 'center'
                    },
                    toolbox: {
                      show: true,
                      feature: {
                        saveAsImage: {}
                      }
                    },
                    legend: {
                      orient: 'vertical',
                      left: 1,
                      top: 20,
                      data: ['发生', '未发生'],
                      textStyle: {
                        fontSize: '12',
                        color: '#000',
                      }
                    },
                    color: ['rgb(194,53,49)', 'rgb(32,106,255)'],
                    series: [{
                      name: '事件发生比率',
                      type: 'pie',
                      radius: ['0%', '70%'],
                      //这个属性专属调节饼状图图表位置
                      center: ["60%", "57%"],
                      avoidLabelOverlap: false,
                      label: {
                        normal: {
                          show: true,
                          position: 'inner',
                          formatter: '{d}%',
                          textStyle: {
                            fontWeight: 'normal',
                            fontSize: 12
                          }
                        }
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data: [
                        {value: this.happenPieChartData.happen_day, name: '发生'},
                        {value: this.happenPieChartData.unhappen_day, name: '未发生'}
                      ]
                    }]
                  });
                })
            break;
            //能量图表部分
          case "energyChart":
              energyData(formJSON)
                  .then(response=>{
                    this.happenEnergyChartData.happenTime.length = 0;
                    this.happenEnergyChartData.happenEnergy.length = 0;
                    for (let index = 0; index < response.data.data.length; index++) {
                      this.happenEnergyChartData.happenTime.push(response.data.data[index].happenTime);
                      this.happenEnergyChartData.happenEnergy.push(response.data.data[index].happenEnergy);
                    }
                    //初始化图表DOM容器
                    let energyLineChart = echarts.init(this.$refs.energy_line);
                    energyLineChart.setOption({
                      title: {
                        text: "能量变化",
                        left: "center",
                        textStyle: {
                          color: "#000"
                        }
                      },
                      tooltip: {
                        trigger: "axis",
                        // position: function (pt) {
                        //     return [pt[0], '30%'];
                        // }
                        position: [50, 50]
                      },
                      toolbox: {
                        feature: {
                          dataZoom: {
                            yAxisIndex: "none"
                          },
                          restore: {},
                          saveAsImage: {}
                        }
                      },
                      grid: {
                        x: 55,
                        y: 29,
                        x2: 46,
                        y2: 50
                      },
                      xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: this.happenEnergyChartData.happenTime,
                        axisLine: {
                          lineStyle: {
                            color: "#000",
                            width: 1 //这里是为了突出显示加上的
                          }
                        }
                      },
                      yAxis: {
                        type: "value",
                        name: "能量/10^4J",
                        boundaryGap: [0, "100%"],
                        axisLine: {
                          lineStyle: {
                            color: "#000",
                            width: 1 //这里是为了突出显示加上的
                          }
                        }
                      },
                      dataZoom: [
                        {
                          type: "inside",
                          start: 0,
                          end: 30
                        },
                        {
                          start: 0,
                          end: 10,
                          handleIcon:
                              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
                          handleSize: "50%",
                          handleStyle: {
                            color: "000",
                            shadowBlur: 3,
                            shadowColor: "rgba(0, 0, 0, 0.6)",
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                          }
                        }
                      ],
                      series: [
                        {
                          name: "能量(*10^4J)",
                          type: "line",
                          smooth: true,
                          symbol: "none",
                          sampling: "average",
                          itemStyle: {
                            color: "rgb(255, 70, 131)"
                          },
                          areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: "rgb(255, 158, 68)"
                              },
                              {
                                offset: 1,
                                color: "rgb(255, 70, 131)"
                              }
                            ])
                          },
                          data: this.happenEnergyChartData.happenEnergy
                        }
                      ]
                    });
                  })
            //能量饼图请求
            happenEnergyChart(formJSONPie)
                .then(response=>{
                  // console.log(response.data);
                  this.happenEnergyChartData.energyPieChartData.aboveNine = response.data.data[0].above_nine;
                  this.happenEnergyChartData.energyPieChartData.nineAndEight = response.data.data[0].nine_and_eight;
                  this.happenEnergyChartData.energyPieChartData.eightAndSeven = response.data.data[0].eight_and_seven;
                  this.happenEnergyChartData.energyPieChartData.sevenAndSix = response.data.data[0].seven_and_six;
                  this.happenEnergyChartData.energyPieChartData.sixAndFive = response.data.data[0].six_and_five;
                  this.happenEnergyChartData.energyPieChartData.fiveAndFour = response.data.data[0].five_and_four;
                  let energyPieChart = echarts.init(this.$refs.energy_pie);
                  energyPieChart.setOption({
                    title: {
                      text: "能量图",
                      left: "center",
                      textStyle: {
                        color: "#000"
                      }
                    },
                    legend: {
                      orient: "vertical",
                      left: 0,
                      top: 20,
                      data: [">10^9", ">10^8", ">10^7", ">10^6", ">10^5", ">10^4"],
                      textStyle: {
                        fontSize: "12",
                        fontWeight: "bold",
                        color: "#000"
                      }
                    },
                    color: [
                      "rgb(194,53,49)",
                      "rgb(224,98,173)",
                      "rgb(234,126,83)",
                      "rgb(32,106,255)",
                      "rgb(97,160,168)",
                      "rgb(82,129,51)"
                    ],
                    series: [
                      {
                        name: "垮塌事故比率",
                        type: "pie",
                        radius: ["0%", "65%"],
                        //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                        center: ["60%", "54%"],
                        avoidLabelOverlap: false,
                        label: {
                          normal: {
                            show: true,
                            position: "inner",
                            formatter: "{d}%",
                            textStyle: {
                              fontWeight: "normal",
                              fontSize: 12
                            }
                          }
                        },
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: "15",
                            fontWeight: "bold"
                          }
                        },
                        labelLine: {
                          show: false
                        },
                        data: [
                          // console.log(above_nine),
                          {value: this.happenEnergyChartData.energyPieChartData.aboveNine, name: ">10^9"},
                          {value: this.happenEnergyChartData.energyPieChartData.nineAndEight, name: ">10^8"},
                          {value: this.happenEnergyChartData.energyPieChartData.eightAndSeven, name: ">10^7"},
                          {value: this.happenEnergyChartData.energyPieChartData.sevenAndSix, name: ">10^6"},
                          {value: this.happenEnergyChartData.energyPieChartData.sixAndFive, name: ">10^5"},
                          {value: this.happenEnergyChartData.energyPieChartData.fiveAndFour, name: ">10^4"}
                        ]
                      }
                    ]
                  });
                });
            break;
            //破坏类型饼图
          case "destroyChart":
            //直接请求
            happenFailureModeChart(formJSONPie)
                .then(response=>{
                  this.happenFailureModeChart.happenTensorData.pullNum=response.data.data[0].pullNum;
                  this.happenFailureModeChart.happenTensorData.mixNum = response.data.data[0].mixNum;
                  this.happenFailureModeChart.happenTensorData.shearNum = response.data.data[0].shearNum;
                  this.happenFailureModeChart.happenBvalueData.severetyNum = response.data.data[0].severetyNum;
                  this.happenFailureModeChart.happenBvalueData.nomalNum = response.data.data[0].nomalNum;
                  this.happenFailureModeChart.happenBvalueData.venialNum = response.data.data[0].venialNum;
                  let destroyTypePieChart = echarts.init(this.$refs.destroyTypePieChart);
                  let destroyLevelPieChart = echarts.init(this.$refs.destroyLevelPieChart);
                  destroyTypePieChart.setOption({
                    title: {
                      text: "破坏类型",
                      left: "center",
                      textStyle: {
                        color: "#000"
                      }
                    },
                    legend: {
                      orient: "vertical",
                      left: 0,
                      top: 20,
                      data: ["剪切", "张拉", "混合"],
                      textStyle: {
                        fontSize: "12",
                        fontWeight: "bold",
                        color: "#000"
                      }
                    },
                    color: ["rgb(194,53,49)", "rgb(47,69,84)", "rgb(234,126,83)"],
                    series: [
                      {
                        name: "破坏类型发生比率",
                        type: "pie",
                        radius: ["0%", "65%"],
                        //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                        center: ["60%", "54%"],
                        avoidLabelOverlap: true,
                        label: {
                          normal: {
                            show: true,
                            position: "inner",
                            formatter: "{d}%",
                            textStyle: {
                              fontWeight: "normal",
                              fontSize: 12
                            }
                          }
                        },
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: "15",
                            fontWeight: "bold"
                          }
                        },
                        labelLine: {
                          show: false
                        },
                        data: [
                          {value: this.happenFailureModeChart.happenTensorData.shearNum, name: "剪切"},
                          {value: this.happenFailureModeChart.happenTensorData.pullNum, name: "张拉"},
                          {value: this.happenFailureModeChart.happenTensorData.mixNum, name: "混合"}
                        ]
                      }
                    ]
                  });
                  destroyLevelPieChart.setOption({
                    title: {
                      text: "破坏程度",
                      left: "center",
                      textStyle: {
                        color: "#000"
                      }
                    },
                    legend: {
                      orient: "vertical",
                      left: 1,
                      top: 20,
                      data: ["严重", "一般", "轻微"],
                      textStyle: {
                        fontSize: "12",
                        fontWeight: "bold",
                        color: "#000"
                      }
                    },
                    color: ["rgb(194,53,49)", "rgb(32,106,255)", "rgb(189,142,62)"],
                    series: [
                      {
                        name: "破坏程度",
                        type: "pie",
                        radius: ["0%", "65%"],
                        //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                        center: ["60%", "54%"],
                        avoidLabelOverlap: false,
                        label: {
                          normal: {
                            show: true,
                            position: "inner",
                            formatter: "{d}%",
                            textStyle: {
                              fontWeight: "normal",
                              fontSize: 12
                            }
                          }
                        },
                        emphasis: {
                          label: {
                            show: true,
                            fontSize: "15",
                            fontWeight: "bold"
                          }
                        },
                        labelLine: {
                          show: false
                        },
                        data: [
                          {value: this.happenFailureModeChart.happenBvalueData.severetyNum, name: "严重"},
                          {value: this.happenFailureModeChart.happenBvalueData.nomalNum, name: "一般"},
                          {value: this.happenFailureModeChart.happenBvalueData.venialNum, name: "轻微"}
                        ]
                      }
                    ]
                  });
                });
            break;
            //严重程度图表 无数据
          case "damageChart":
            let accidentPieChart = echarts.init(this.$refs.accidentPieChart);
            accidentPieChart.setOption({
              title: {
                text: "垮塌事故",
                left: "center",
                textStyle: {
                  color: "#000"
                }
              },
              legend: {
                orient: "vertical",
                left: 0,
                top: 20,
                data: ["煤体压缩", "顶板断裂", "断层错动"],
                textStyle: {
                  fontSize: "12",
                  fontWeight: "bold",
                  color: "#000"
                }
              },
              color: ["rgb(103,224,227)", "rgb(212,130,101)", "rgb(97,160,168)"],
              series: [
                {
                  name: "垮塌事故比率",
                  type: "pie",
                  radius: ["0%", "65%"],
                  //这个属性专属调节饼状图图表位置  [‘左右’，‘上下’]
                  center: ["60%", "54%"],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: true,
                      position: "inner",
                      formatter: "{d}%",
                      textStyle: {
                        fontWeight: "normal",
                        fontSize: 12
                      }
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: "15",
                      fontWeight: "bold"
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: 17, name: "煤体压缩"},
                    {value: 5, name: "顶板断裂"},
                    {value: 9, name: "断层错动"}
                  ]
                }
              ]
            });
            break;
            //待拓展图表
          case "extraChart":
            Toast.fail({
              message:'null',
              duration:1500
            });
            break;
        }
      }
    }
  },
  computed:{
    watchStartTime(){
      return this.$store.state.sieveData.startTime;
    },
    watchEndTime(){
      return this.$store.state.sieveData.endTime;
    },
    watchSieveMineArea(){
      return this.$store.getters.sieveAreaSwitchTableName;
    },

  },
  watch:{
    watchStartTime(data){
      var resultsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
      }
      this.initChart(data,this.$store.state.sieveData.endTime,resultsTableName)
    },
    watchEndTime(data){
      var resultsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
      }
      this.initChart(this.$store.state.sieveData.startTime,data,resultsTableName)
    },
    watchSieveMineArea(data){
      var resultsTableName = '';
      if (this.$store.state.userInfo.role === 'ROLE_admin'){
        resultsTableName = this.$store.getters.sieveAreaSwitchTableName;
      }else{
        resultsTableName = this.$store.getters.userAreaSwitchTableName;
      }
      this.initChart(this.$store.state.sieveData.startTime,this.$store.state.sieveData.endTime,data)
    },
  }
}
</script>

<style scoped>

.charts {
  background-color: rgb(252, 249, 249);;
}

.chartContainner {
  padding-top: 10px;
  border: 1px solid darkgrey;
  border-radius: 5px;
  margin: 0 auto;
  background-color: #ffffff;
  width: 80%;
}

.half-space {
  height: 25px;
}

.space {
  height: 50px;
}

</style>